<template>
    <div class="chart" ref="echarts" :style="{width:widthbumbar+'%',height:heightnumbar+'%'}"></div>
</template>

<script>

export default {
  data(){
      return{
          myChart:null,
      }
  },
  props:{
    //  data:{
    //   type:Array,
    //   default:[]
    // },
    widthbumbar:{
      type:Number,
      default:96
    },
    heightnumbar:{
      type:Number,
      default:100
    }
  },
  created(){
    // console.log("11222333")
    // console.log(this.data);
  },
  mounted(){
      this.drawLine();
  },
  methods:{
    //绘制图表
    drawLine() {
     // 2. 指定配置和数据


    
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(this.$refs.echarts)
    //制定配置项和数据

    var option = {

		tooltip: {
			trigger: 'item',  
            formatter: function(params) {  
                var res = '本月'+params.name+'号运单数：'+params.data; 
                return res;  
            }  
		},
		grid: {
			top: '5%',
			left: '0%',
            right:'5%',
	        width: '95%',
	        height: '95%',
	        containLabel: true
	    },
		xAxis: {
			data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
			axisLabel: {
                show: true,
                textStyle: {
                    fontSize: '12px',
                    color: '#fff',
                }
           	},
           	axisLine:{  
                lineStyle:{  
                    color:'#fff',  
                    width:1, 
                }  
            }  
		},

		yAxis: {
			axisLabel: {
                show: true,
                textStyle: {
                    fontSize: '12px',
                    color: '#fff',
                }
           	},
           	axisLine:{  
                lineStyle:{  
                    color:'#fff',  
                    width:1, 
                }  
            },
            splitLine:{  
	            show:false,
    		}  
		},

		series :{
			name: '',
			type: 'bar',
			barWidth : 10,
			data: ['5','14','3','6','8','18','11','4','8','7','16','13','6','10','11','9','19','13','4','20','12','7','13','15','8','3','9','16','11','16','8'],
			itemStyle: {
                normal: {
                	barBorderRadius:[5, 5, 5, 5],
                    color: this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                         
                            {offset: 0, color: '#45b4e7'},
                            {offset: 1, color: '#3876cd'}
                        ]
                    ),
                },
            },
		},
	}
    // 绘制图表
    this.myChart.setOption(option);
    //4.让图标跟随屏幕自动去适应
      window.addEventListener("resize",()=>{
          this.myChart.resize();
      })
    }

  },
//   watch:{
//       data:{
//           handler(){
//              //监听data的变化更新图表 
//              this.myChart.setOption({
//                 xAxis: {
//                   data:this.data.map(item => item.dateTime),
//                  },
//                 series: [
//                   {
//                     data:this.data.map(item => item.countNumber),
//                   }
//                 ]
//              });
//             //   document.getElementById('aside').removeAttribute('_echarts_instance_'); // 移除容器上的 _echarts_instance_
//             //     this.echarts2(this.imageData)
//           }
//       }
//   }
};
</script>

<style lang="scss" scoped>
.chart{
    height: 3rem;
}
</style>